<template>
  <div class="tab">
    <div class="live-tab" id="test">
      <div class=" left">
        <router-link to="/live/recommend">
          <img v-if="routerName=='recommend'" src="./image/recommend_on.png" alt="">
          <img v-else src="./image/recommend.png" alt="">
          <span>今日推荐</span>
        </router-link>
        <router-link to="/live/video">
          <img v-if="routerName=='video'" src="./image/video_on.png" alt="">
          <img v-else src="./image/video.png" alt="">
          <span>全部视频</span>
        </router-link>
        <router-link to="/live/homerecommend">
          <img v-if="routerName=='homerecommend'" src="./image/video_on.png" alt="">
          <img v-else src="./image/video.png" alt="">
          <span>首页推荐</span>
        </router-link>
        <!-- <router-link to="/live/collection">
          <img v-if="routerName=='collection'" src="./image/collection_on.png" alt="">
          <img v-else src="./image/collection.png" alt="">
          <span>我的收藏</span>
        </router-link> -->
      </div>
      <!-- <marquee class="center" >解决</marquee>  -->
      <div class="right clearfix">
        
        <!-- <div class="search-wrap fl" v-if="routerName != 'collection'">
          <input type="text" placeholder="点击搜索" v-model.trim="title" >
          <img src="./image/search.png" alt="" v-show="title==''">
          <img src="./image/search_on.png" alt="" v-show="title!=''">
        </div> -->
        <span class=" tips">视图</span>
        <div class="screen-wrap " >
          <div class="screen4" @click="screenEvent(4)">
            <img v-show="screenNum == 4" src="./image/screen4_on.png" alt="" >
            <img v-show="screenNum != 4" src="./image/screen4.png" alt="" >
          </div>
          <div class="screen9" @click="screenEvent(9)" >
            <img v-show="screenNum == 9" src="./image/screen9_on.png" alt="" >
            <img v-show="screenNum != 9" src="./image/screen9.png" alt="" >
          </div>
        </div>
        <div class="full-screen " v-show="routerName == 'video' || routerName == 'homerecommend'">
          <img src="./image/full-screen.png" alt="" @click="screen">
        </div>
      </div>
    </div>
    
  </div>
  
</template>

<script>
export default {
  data() {
    return {
      routerName:'',
      title:'',
    }
  },
  mounted() {
    this.routerName = this.$route.name
  },
  watch:{
    $route(to,from){
      this.routerName = to.name
    }
  },
  computed: {
    screenNum() {
      return this.$store.state.screenNum
    }
  },
  methods: {
    screenEvent(num) {
      this.$store.commit('switchScreen',num)
    },
    screen() {
      this.$store.commit('setFullScreen',true)
    }
  }
};
</script>

<style scoped lang="less" >
.live-tab {
  height:60px;
  padding-right:20px;
  border:1px solid #E4E9ED;
  background:#fff;
  display:flex;
  align-items: center;
  justify-content:space-between;
  .left {
    a {
      font-size: 22px;
      width:186px;
      height:57px;
      color:#0F1013;
      text-decoration: none;
      display:inline-flex;
      align-items: center;
      justify-content: center;
      &.router-link-active {
        font-weight: bold;
        border-bottom:3px solid #45DDC8;
      }
      img {
        width:26px;
        // vertical-align: middle;
        // display:block;
      }
      span {
        margin-left:12px;
      }
    }
  }
  .center {
    width:300px;
    flex:1;
  }
  .right {
    box-sizing: border-box;
    display:flex;
    align-items: center;
    
    .search-wrap {
      width:320px;
      height:40px;
      background:rgba(242,242,242,1);
      border-radius:20px;
      position: relative;
      input {
        width:100%;
        height:40px;
        border-radius:20px;
        background:rgba(242,242,242,1);
        border:0;
        outline: none;
        padding-left:19px;
        padding-right:50px;
        font-size:15px;
        box-sizing: border-box;
      }
      input::-webkit-input-placeholder{
        color:#999;
      }
      img {
        position: absolute;
        width:24px;
        right:19px;
        top:8px;
      }
    }
    .tips {
      font-size:16px;
      color:#999;
      margin-left:39px;
      margin-right:11px;
    }
    .screen-wrap {
      width:102px;
      height:36px;
      border-radius: 20px;
      background:#F0F3F5;
      text-align: center;
      display:flex;
      align-items: center;
      justify-content: center;
      div {
        display:inline-block;
        // margin:0 10px;
        // background:#fff;
        transition:.2s;
        width:30px;
        height:28px;
        border-radius: 5px;
        margin:0 2px;
        display:flex;
        align-items: center;
        justify-content: center;
        img {
          width:20px;
          cursor: pointer;
          display:block;
        }
      }
      div:hover {
        background:#fff;
        transition:.2s;
      }
    }
    .full-screen {
      margin-left:30px;
      border-left:1px solid #E4E9ED;
      img {
        // margin-top:7px;
        margin-left:12px;
        cursor: pointer;
      }
    }
  }
}
</style>
